<template>
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-12">
          <div class="box box-primary">
            <div class="box-header width-border">
              <h3 class="box-title">技术等级桥龄统计图</h3>
            </div>
            <div class="box-body">
              <div id="bridgeAgeLevelCharts" style="height: 320px;"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <FrontSideTable
            dataUrl="/stat/bridgeAgeLevel/getBridgeAgeLevelList"
            tableTitle="技术等级桥龄统计表"
            :columns="columns"
            searchHint="输入关键字进行搜索"
            :searchProps="searchProps"
            :addable="false"
            @onCreated="handleTableCreated"
            customButton>
            <template slot="afterColumns">
              <el-table-column label="桥龄>=30年" align="center">
                <el-table-column label="数量" prop="moreThanThirty" align="center"></el-table-column>
                <el-table-column label="占比" prop="moreThanThirtyRatio" align="center"></el-table-column>
              </el-table-column>
              <el-table-column label="桥龄20～30年" align="center">
                <el-table-column label="数量" prop="lessThanThirty" align="center"></el-table-column>
                <el-table-column label="占比" prop="lessThanThirtyRatio" align="center"></el-table-column>
              </el-table-column>
              <el-table-column label="桥龄10～20年" align="center">
                <el-table-column label="数量" prop="lessThanTwenty" align="center"></el-table-column>
                <el-table-column label="占比" prop="lessThanTwentyRatio" align="center"></el-table-column>
              </el-table-column>
              <el-table-column label="桥龄<10年" align="center">
                <el-table-column label="数量" prop="lessThanTen" align="center"></el-table-column>
                <el-table-column label="占比" prop="lessThanTenRatio" align="center"></el-table-column>
              </el-table-column>
            </template>
          </FrontSideTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from "../../../echarts"
  import FrontSideTable from "../../template/FrontSideTable"
  import {getBridgeAgeLevelChartsOption} from "../../../assets/js/utils/ViewUtils"

  export default {
    name:"BridgeAgeLevel",
    data() {
      return {
        bridgeAgeLevelCharts:null,
        bridgeAgeLevelList:[],
        columns:[
          {prop:"bridgeEvaluationLevel", label:"技术状况等级"}
        ],
        searchProps:["bridgeEvaluationLevel"]
      }
    },
    methods:{
      initCharts() {
        this.bridgeAgeLevelCharts = echarts.init(document.getElementById("bridgeAgeLevelCharts"));
      },
      handleTableCreated(data) {
        this.bridgeAgeLevelList = data;
        this.bridgeAgeLevelCharts.setOption(getBridgeAgeLevelChartsOption(data));
      }
    },
    mounted() {
      this.initCharts();
    },
    components:{FrontSideTable}
  }
</script>



// WEBPACK FOOTER //
// BridgeAgeLevel.vue?7fdecd57
